import React from 'react';
import ReactDOM from 'react-dom';
import "@/pages/Index/Index.scss";
import {ConatainHeader} from "@/component/ConatainHeader";
import {Layout_Contain_index} from "@/layout/Layout_Contain/Layout_Contain_index";
import {Card} from "@/component/Card";
import  {Seachmenu} from "@/component/SeachMenu/SeachMenu";

let demo_url = "http://pic.rmb.bdstatic.com/9619bd4b6f54160c5c81c6525f35f88b.jpeg";
// 索引页面
interface IProps {
    color: string,
    size?: string,
}

interface IState {
    count: number,
}
export class IndexSearch extends React.Component<IProps, IState> {
    public state = {
        count: 1,
        Conditions:[{
            title:"时间",
            list:[
                {
                    name:"2016",
                    id:"",
                }
            ]
        }, {
                title:"时间",
                list:[
                    {
                        name:"2016",
                        id:"",
                    }
                ]
        }, {
            title:"时间",
            list:[
                {
                        name:"2016",
                        id:"",
                }]
        },
        ],
        videoCardList: [
            {
                id:1,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:2,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:3,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:4,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:5,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:6,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
        ],
    }

    public render() {
        let { Conditions, videoCardList} = this.state;
        return (<div className={'my_index'}>
            <ConatainHeader></ConatainHeader>
            <Layout_Contain_index>
                {
                    Conditions.map((ele,index)=>{
                        return   <Seachmenu info={ele} key={index}></Seachmenu>
                    })

                }
                <div className={"hot_video_list"}>
                    <div className={'video_list'}>
                        {videoCardList.map((ele,index) => {
                            let {list}=ele;
                            return <div key={ele.id+index}>
                                {list.map((ele1,index)=>{
                                    return <Card key={index} url={ele1.url} title={ele1.title} num={ele1.num}></Card>
                                })}
                            </div>
                        })}

                    </div>
                </div>

            </Layout_Contain_index>
        </div>)
    }
}